<template>
  <div class="demo-content" ref="exportfile">
    <h1>复制粘贴</h1>
    <section class="demo-text">
      <canvas id="canvas" width="1200" height="600" ref="canvas"></canvas>
      <el-button @click="Copy">复制</el-button>
      <el-button @click="Paste">粘贴</el-button>
      <el-button @click="clear">清除复制</el-button>
      <el-button @click="del">删除</el-button>
      <el-button @click="exportfile" ref="bt" >下载</el-button>
      <h2>说明</h2>
      <p>选中后点击复制，再点击粘贴可以在复制的元素旁边新增一个元素，点击清除复制可以清除选择的元素，选中元素后点击删除可以删除元素</p>
      <p>使用
        <span class="annotation">canvas.getActiveObject()</span>获取当前活跃对象
      </p>
      <p style="text-align:right;padding-right:60px">@王睿杰 2019.1.22</p>
    </section>
  </div>
</template>
<script>
import {fabric} from  "@/js/fabric";
import exportword from '@/js/wordexpory.js'
export default {
  data() {
    return {
      canvas: null,
      _clipboard: null,
      checked: null,
      mouseevent: null
    };
  },
  methods: {
      exportfile(){
        console.log(this.$refs.bt)
        //文件下载功能
        //   exportword(this.$refs.exportfile,'demo')
      },
    del() {
      let _this = this;
      _this.mouseevent = null;
      console.log(_this.checked);
      if (!!_this.checked) {
        _this.canvas.remove(_this.checked);
        _this.checked = null;
      }
    },
    clear() {
      this._clipboard = null;
      this.mouseevent = null;
    },
    Copy() {
      // clone what are you copying since you
      // may want copy and paste on different moment.
      // and you do not want the changes happened
      // later to reflect on the copy.
      let _this = this;
      _this.mouseevent = null;
      this.canvas.getActiveObject() &&
        this.canvas.getActiveObject().clone(function(cloned) {
          _this._clipboard = cloned;
          _this.$notify({
            title: "提示",
            message: "复制成功",
            duration: 2000,
            position: "top-left"
          });
        });
    },
    Paste(e) {
      let _this = this;
      let canvas = _this.canvas;
      let _clipboard = _this._clipboard;
      if (!_this._clipboard) {
        _this.$notify({
          title: "提示",
          message: "需要先进行复制才能粘贴",
          duration: 2000,
          position: "top-left"
        });
        return;
      }
      let pointer = e.pointer || {};
      // clone again, so you can do multiple copies.
      _this._clipboard.clone(function(clonedObj) {
        canvas.discardActiveObject();
        clonedObj.set({
          left: pointer.x || clonedObj.left + 10,
          top: pointer.y || clonedObj.top + 10,
          evented: true
        });
        if (clonedObj.type === "activeSelection") {
          // active selection needs a reference to the canvas.
          clonedObj.canvas = canvas;
          clonedObj.forEachObject(function(obj) {
            canvas.add(obj);
          });
          // this should solve the unselectability
          clonedObj.setCoords();
        } else {
          canvas.add(clonedObj);
        }
        // _clipboard.top += 10;
        // _clipboard.left += 10;
        canvas.setActiveObject(clonedObj);
        canvas.requestRenderAll();
      });
    }
  },
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      var canvas = (this.canvas = new fabric.Canvas("canvas"));
      // create a rectangle object
      var rect = new fabric.Rect({
        left: 100,
        top: 50,
        fill: "#D81B60",
        width: 100,
        height: 100,
        strokeWidth: 2,
        stroke: "#880E4F",
        rx: 10,
        ry: 10,
        angle: 45,
        hasControls: true
      });

      canvas.add(rect);

      // create a rectangle object
      var rect2 = new fabric.Rect({
        left: 200,
        top: 50,
        fill: "#F06292",
        width: 100,
        height: 100,
        strokeWidth: 2,
        stroke: "#880E4F",
        rx: 10,
        ry: 10,
        angle: 45,
        hasControls: true
      });

      canvas.add(rect2);

      var circle1 = new fabric.Circle({
        radius: 65,
        fill: "#039BE5",
        left: 0
      });

      var circle2 = new fabric.Circle({
        radius: 65,
        fill: "#4FC3F7",
        left: 200,
        opacity: 0.7
      });
    var circle3 = new fabric.Circle({
        radius: 65,
        fill: "#4FC3F7",
        left: 300,
        opacity: 0.7
      });
      var group = new fabric.Group([circle1, circle2], {
        left: 40,
        top: 250
      });
      window.group=group
      canvas.add(group);
      function abc(e) {
        _this.checked = e.target;
      }
      canvas.on("mouse:down", abc);
      canvas.on("mouse:move", function(e) {
        _this.mouseevent = e;
      });
    //   canvas.off("mouse:down", abc);
      window.addEventListener("keydown", function(e) {
        if (e && e.ctrlKey) {
          if (e.keyCode == 67) {
            console.log(_this.canvas.getActiveObject());
            _this._clipboard = _this.canvas.getActiveObject();
          }
          if (e.keyCode == 86) {
            _this.Paste(_this.mouseevent);
          }
        }
      });
    });
  },
  distoryed() {
    window.removeEventListener("keydown");
  }
};
</script>

